<template>
  <div class="chat-static-container">
     <custom-tab-bar/>
    <!-- 聊天内容区域 -->
    <div class="chat-static-scroll" ref="scrollContainer">
      <div class="message-item" v-for="(msg, index) in messageList" :key="index">
        <!-- AI 头像 -->
        <img 
          class="ai-avatar" 
          src="/static/ai2.png" 
          v-if="!msg.isMine"
        >
        <!-- 聊天气泡 -->
        <div 
          class="message-bubble" 
          :class="{ 
            'other-bubble': !msg.isMine, 
            'my-bubble': msg.isMine 
          }"
        >
          <div class="message-content">
            <span class="message-text">{{ msg.content }}</span>
          </div>
          <!-- 复制按钮（仅 AI 消息显示，移至文本下方） -->
          <div class="copy-btn-wrapper" v-if="!msg.isMine">
            <div class="copy-btn" @click="copyText(msg.content)">
              <image class="copy-img-btn" src="/static/copy.png"></image>
            </div>
			<!-- 添加刷新按钮 -->
			<div class="refresh-btn" @click="refreshAIResponse(index)">
				<image class="refresh-img-btn" src="/static/shuaxin.png"></image>
			</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
	<div class="input-area">
	<input 
		class="input-box" 
		placeholder="请输入内容" 
		v-model="inputValue"
		@confirm="sendMessage"
		@keydown.enter="handleKeyPress"
	>
	<button class="send-btn" :disabled="!inputValue.trim()" @click="sendMessage">发送</button>
	</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageList: [
        {
          content: "你好！请问有什么可以帮助你的？如果你有任何问题或者需要建议，请随时告诉我。",
          isMine: false
        }
      ],
      inputValue: "",
      // 防止连续点击
      lock: false
    };
  },

onLoad() {
  // 检查是否有从职位详情页传来的职位ID
  const jobId = wx.getStorageSync('currentJobId');
  if (jobId) {
    // 有职位ID时，调用模拟面试方法
    this.aMockInterview(jobId);
  }
},

  methods: {
    /* ---------- 工具：复制 ---------- */
    copyText(text) {
      wx.setClipboardData({
        data: text,
        success: () => wx.showToast({ title: "已复制", icon: "none" })
      });
    },

    /* ---------- 工具：滚动到底部 ---------- */
    scrollToBottom() {
      this.$nextTick(() => {
        wx.createSelectorQuery()
          .select(".chat-static-scroll")
          .boundingClientRect(rect => {
            wx.pageScrollTo({ scrollTop: rect.height, duration: 0 });
          })
          .exec();
      });
    },

    /* ---------- 发送消息 ---------- */
    sendMessage() {
      const content = this.inputValue.trim();
      if (!content || this.lock) return;

      /* 1. 追加用户消息 */
      this.messageList.push({ content, isMine: true });
      this.inputValue = "";
      this.scrollToBottom();

      /* 2. 追加空白 AI 占位 */
      const aiIndex = this.messageList.length;
      this.messageList.push({ content: "", isMine: false });

      /* 3. 真正调接口 */
      this.lock = true;
      this.getAIResponse(content, aiIndex);
    },

    /* ---------- 处理回车发送 ---------- */
    handleKeyPress(e) {
      // 处理键盘事件，支持回车发送
      if (e.keyCode === 13 && !e.shiftKey) {
        e.preventDefault();
        this.sendMessage();
      }
    },

    /* ---------- 终极SSE格式数据清理与Markdown格式处理函数 ---------- */
    cleanSSEData(rawData) {
      if (!rawData) return "";
      
      let text = "";
      
      // 1. 处理对象格式
      if (typeof rawData === 'object') {
        if (rawData.reply) {
          text = String(rawData.reply);
        } else if (rawData.data) {
          text = String(rawData.data);
        } else if (rawData.content) {
          text = String(rawData.content);
        } else {
          try {
            text = JSON.stringify(rawData);
          } catch (e) {
            text = String(rawData);
          }
        }
      } else {
        text = String(rawData);
      }
      
      // 2. 第一阶段：专门针对event:message和data:格式的强力清理
      // 使用更严格的正则表达式匹配所有可能的SSE格式变体
      
      // 方案1: 直接移除所有event:message行
      text = text.replace(/^\s*event:\s*message\s*$/gim, '');
      
      // 方案2: 移除所有event:行
      text = text.replace(/^\s*event:\s*\w+\s*$/gim, '');
      
      // 方案3: 移除data:前缀，但保留其后面的内容
      text = text.replace(/^\s*data:\s*/gim, '');
      
      // 方案4: 特殊处理可能的JSON格式的data字段
      text = text.replace(/^\s*data:\s*"(.*)"\s*$/gim, '$1');
      text = text.replace(/^\s*data:\s*'(.*)'\s*$/gim, '$1');
      
      // 方案5: 处理嵌套的SSE格式（递归清理）
      if ((text.includes('event:') || text.includes('data:')) && text.length < 10000) { // 防止无限递归
        text = this.cleanSSEData(text);
      }
      
      // 3. 第二阶段：清理其他SSE相关格式
      text = text
        .replace(/^\s*:\s*.*/gim, '') // 注释行
        .replace(/^\s*id:\s*\w*\s*$/gim, '') // ID行
        .replace(/^\s*retry:\s*\d+\s*$/gim, '') // retry行
        .replace(/^\s*event:\s*message\s*$/gim, '') // 再次清理event:message
        .replace(/\n\s*\n/g, '\n') // 移除空行
        .trim();
      
      // 4. 第三阶段：处理可能的JSON格式
      try {
        // 尝试解析JSON
        if ((text.startsWith('{') && text.endsWith('}')) || 
            (text.startsWith('[') && text.endsWith(']')) ||
            (text.startsWith('"') && text.endsWith('"'))) {
          const parsed = JSON.parse(text);
          if (typeof parsed === 'object') {
            // 提取深层嵌套的内容
            text = this.extractDataField(parsed);
          } else {
            text = String(parsed);
          }
        }
      } catch (e) {
        // 如果不是有效的JSON，保持原文本
        console.log('不是有效的JSON，保持原文本');
      }
      
      // 5. 最后的保险：再次清理可能残留的SSE格式
      text = text.replace(/event:\s*message|data:/gi, '');
      
      // 6. 处理Markdown格式：确保**包围的文本正确显示为加粗
      // 将**文本**转换为Markdown加粗格式
      text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
      
      return text.trim();
    },
    
    /* ---------- 辅助函数：递归提取所有文本内容 ---------- */
    extractDataField(data) {
      if (!data) return '';
      
      if (typeof data === 'string') {
        // 字符串可能包含嵌套的SSE格式，再次清理
        let cleaned = this.cleanSSEData(data);
        try {
          const parsed = JSON.parse(cleaned);
          if (typeof parsed === 'object') {
            return this.extractDataField(parsed);
          }
        } catch (e) {
          return cleaned;
        }
      } else if (Array.isArray(data)) {
        // 数组情况，递归处理每个元素
        const result = [];
        data.forEach(item => {
          const extracted = this.extractDataField(item);
          if (extracted) result.push(extracted);
        });
        return result.join('\n');
      } else if (typeof data === 'object') {
        // 对象情况，尝试提取所有可能的文本字段
        const textFields = ['data', 'content', 'message', 'reply', 'result', 'text', 'answer', 'response'];
        
        for (const field of textFields) {
          if (data[field]) {
            const extracted = this.extractDataField(data[field]);
            if (extracted) return extracted;
          }
        }
        
        // 如果没有找到特定字段，尝试将对象转为字符串并再次清理
        try {
          const objStr = JSON.stringify(data);
          return this.cleanSSEData(objStr);
        } catch (e) {
          return String(data);
        }
      }
      
      return String(data);
    },

    /* ---------- 模拟面试方法 ---------- */
    // 修改aMockInterview方法，增加处理逻辑
async aMockInterview(positionId) {
  this.lock = true;
  
  // 清除之前的模拟面试结果（保留第一条欢迎消息）
  if (this.messageList.length > 1) {
    this.messageList = [this.messageList[0]];
  }
  
  // 创建新条目并推入数组
  this.messageList.push({
    content: `正在为您准备职位ID: ${positionId} 的模拟面试...`,
    isMine: false
  });
  this.scrollToBottom();
  
  try {
    const token = wx.getStorageSync("token") || "";
    
    // 使用微信小程序的request API发送请求
    const response = await new Promise((resolve, reject) => {
      wx.request({
        url: `http://81.71.154.186:8088/api/jobPostings/interview/${positionId}`,
        method: "GET",
        header: {
          "Content-Type": "application/json",
          token: token
        },
        success: resolve,
        fail: reject
      });
    });
    
    if (response.statusCode === 200 && response.data) {
      const lastIndex = this.messageList.length - 1;
      
      // 终极清理：多次应用清理函数确保彻底
      let fullText = response.data;
      // 应用清理函数3次，确保所有嵌套的SSE格式都被处理
      for (let i = 0; i < 3; i++) {
        fullText = this.cleanSSEData(fullText);
      }
      
      // 安全检查：确保最终文本不包含任何SSE相关格式
      if (fullText.includes('event:') || fullText.includes('data:')) {
        // 如果还有残留，使用最激进的清理方法
        fullText = fullText.replace(/event:\s*message|data:/gi, '');
      }
      
      // 逐字显示效果
      this.messageList[lastIndex].content = "";
      for (let i = 0; i < fullText.length; i++) {
        await new Promise(resolve => setTimeout(resolve, 10));
        this.messageList[lastIndex].content += fullText[i];
        this.$forceUpdate();
      }
      
      this.scrollToBottom();
    } else {
      throw new Error(`HTTP error! status: ${response.statusCode}`);
    }
  } catch (error) {
    console.error("请求失败:", error);
    const lastIndex = this.messageList.length - 1;
    this.messageList[lastIndex].content = "请求失败，请检查网络或重试！";
  } finally {
    this.lock = false;
  }
},

    /* ---------- 流式获取 AI 回复 ---------- */
    // 修改getAIResponse方法，添加职位ID的获取和传递
    getAIResponse(userMessage, updateIndex) {
      const token = wx.getStorageSync("token") || "";
      const jobId = wx.getStorageSync('currentJobId'); // 获取职位ID
      const that = this;
    
      wx.request({
        url: "http://81.71.154.186:8088/api/ali/chat/stream",
        method: "POST",
        header: {
          "content-type": "application/json",
          token
        },
        // 在请求数据中加入职位ID（如果存在）
        data: {
          prompt: userMessage,
          jobId: jobId || null // 传递职位ID
        },
        success(res) {
          let reply = "";
          if (res.statusCode === 200 && res.data) {
            // 使用增强版清理函数
            reply = that.cleanSSEData(res.data);
          } else {
            reply = "抱歉，请求异常，请稍后重试";
          }
          
          // 直接设置完整内容
          that.messageList[updateIndex].content = reply;
          that.$forceUpdate();
          that.scrollToBottom();
          that.lock = false;
        },
        fail() {
          that.messageList[updateIndex].content = "网络错误，请检查网络后重试";
          that.lock = false;
        }
      });
    },

    /* ---------- 刷新 AI 回复 ---------- */
    refreshAIResponse(index) {
      if (this.lock) return;
      /* 上一条必为用户消息 */
      const userMessage = this.messageList[index - 1].content;
      this.messageList[index].content = "";
      this.lock = true;
      this.getAIResponse(userMessage, index);
    }
  }
};
</script>

<style scoped>
/* 页面容器 - 使用100%高度而非100vh */
.chat-static-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-color: #b6ccd8;
  /* 强制安全区域 */
  padding-top: var(--status-bar-height, 0);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

/* 聊天内容区域 - 精确计算高度 */
.chat-static-scroll {
  flex: 1;
  padding: 15rpx;
  box-sizing: border-box;
  overflow-y: auto;
  margin-top: 20rpx;
  /* 确保不被输入区域遮挡 */
  padding-bottom: 120rpx; /* 为输入区域预留空间 */
}

/* 输入区域 - 固定在底部 */
.input-area {
  position: fixed;
  bottom: 72rpx;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  /* 安全区域 */
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  z-index: 999;
}

/* 输入框样式优化 */
.input-box {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  border: 1px solid #ccc;
  border-radius: 35rpx;
  font-size: 28rpx;
  background-color: #f8f8f8;
}

.send-btn {
  margin-left: 15rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 30rpx;
  border-radius: 35rpx;
  background-color: #C8E6C9;
  color: #ffffff;
  font-size: 28rpx;
  border: none;
}

/* 消息样式保持不变 */
.message-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.ai-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.message-bubble {
  max-width: 60%;
  padding: 15rpx 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
}

.other-bubble {
  background-color: #ffffff;
}

.my-bubble {
  background-color: #ffffff;
  margin-left: auto;
}

.message-content {
  margin-bottom: 10rpx;
}

.message-text {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333;
}

/* 复制按钮样式 */
.copy-btn-wrapper {
  display: flex;
  justify-content: flex-start;
  margin-top: 5rpx;
}

.copy-img-btn {
  width: 30rpx;
  height: 30rpx;
  opacity: 0.8;
}

.refresh-btn {
  margin-left: 15rpx;
}

.refresh-img-btn {
  width: 30rpx;
  height: 30rpx;
  opacity: 0.8;
}
</style>